// 获取 canvas
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 设置 Matter.js 引擎
const { Engine, Render, World, Bodies, Body, Composite, Events } = Matter;
const engine = Engine.create();
const world = engine.world;

// 禁用重力，使物体不会向下掉落
engine.world.gravity.y = 0;
engine.world.gravity.x = 0;

// 封装创建边界的函数
function createBoundaries() {
    const boundaries = [
        Bodies.rectangle(canvas.width / 2, 0, canvas.width, 50, { isStatic: true }), // 上边
        Bodies.rectangle(canvas.width / 2, canvas.height, canvas.width, 50, { isStatic: true }), // 下边
        Bodies.rectangle(0, canvas.height / 2, 50, canvas.height, { isStatic: true }), // 左边
        Bodies.rectangle(canvas.width, canvas.height / 2, 50, canvas.height, { isStatic: true }) // 右边
    ];
    World.add(world, boundaries); // 添加边界到世界
}

// 随机生成数字
function randomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

// 随机生成颜色，并确保颜色足够亮
function randomColor() {
    const letters = '89ABCDEF';  // 限制颜色值，让生成的颜色偏亮
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 8)];
    }
    return color;
}

// 创建数字物体
function createRandomNumber() {
    const number = randomNumber(1, 80);
    const size = randomNumber(40, 80); // 调整数字大小范围
    const x = canvas.width / 2; // 所有数字从画布中心生成
    const y = canvas.height / 2;
    const color = randomColor(); // 随机颜色

    console.log(`生成数字: ${number}，颜色: ${color}`); // 调试信息

    const numberBody = Bodies.circle(x, y, size / 2, {
        restitution: 0.8, // 增加弹性系数，让碰撞更有弹性
        friction: 0.04,   // 摩擦力
        frictionAir: 0.02, // 空气阻力
        render: {
            fillStyle: color
        }
    });
    numberBody.label = { value: number, color: color }; // 给物体打上数字和颜色标签

    // 随机分配一个速度，让数字从中心向四周迸发
    const speed = 10; // 调整速度
    const angle = Math.random() * 2 * Math.PI; // 随机方向
    Body.setVelocity(numberBody, {
        x: Math.cos(angle) * speed,
        y: Math.sin(angle) * speed
    });

    World.add(world, numberBody);
}

// 初始状态下生成 20-30 个数字
function generateInitialNumbers() {
    const count = randomNumber(30, 39); // 生成 20 到 30 个数字
    for (let i = 0; i < count; i++) {
        createRandomNumber();
    }
}

// 每次生成 3 到 5 个随机数字
function generateNumbers() {
    const count = randomNumber(3, 5); // 生成 3 到 5 个数字
    for (let i = 0; i < count; i++) {
        createRandomNumber();
    }
}

// 每秒生成 3 到 5 个随机数字
setInterval(generateNumbers, 2000);

// 重置状态：清空当前所有数字并生成初始状态数字
function resetState() {
    World.clear(world); // 清空世界中的所有物体，包括边界
    createBoundaries(); // 重新创建边界
    generateInitialNumbers(); // 重新生成 20-30 个数字
}

// 每两分钟重置一次状态
setInterval(resetState, 120000);

// 渲染数字
function render() {
    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 获取世界中的所有物体
    const bodies = Composite.allBodies(world);
    bodies.forEach(body => {
        const { value, color } = body.label; // 获取数字和颜色
        const x = body.position.x;
        const y = body.position.y;
        const angle = body.angle;
        const size = body.circleRadius * 2;
        
        // 绘制数字
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.font = `${size}px Arial`;
        ctx.fillStyle = color;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(value, 0, 0);
        ctx.restore();
    });
    
    // 继续渲染
    requestAnimationFrame(render);
}

// 运行引擎
Engine.run(engine);

// 开始渲染
render();

// 自动调整 canvas 尺寸以适应窗口大小变化
window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

// 初始化时创建边界并生成 20-30 个数字
createBoundaries(); 
generateInitialNumbers();
